<template>
  <!--个人信息-->
  <view class="wrapper-greys p-12">
    <!--    <u-gap height="200rpx"></u-gap>-->
    <u-form
      :model="form"
      ref="uForm"
      label-width="220rpx"
      :labelStyle="labelStyle"
    >
      <view class="flex items-center pb-12">
        <button
          open-type="chooseAvatar"
          @chooseavatar="onChooseAvatar"
          class="avatar rela u-reset-button px-8"
        >
          <u-avatar size="150rpx" :src="form.avatar"></u-avatar>
          <view class="upload absolute flex justify-center items-center">
            <u-icon name="camera" size="40rpx" color="white"></u-icon>
          </view>
        </button>
      </view>
      <view class="bg-whites border-radius-md px-12 py-5 mb-12">
        <u-form-item label="昵称" prop="nickname" borderBottom>
          <!-- <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="u-reset-button"></button> -->
          <input
            placeholder="请输入昵称"
            type="nickname"
            v-model="form.nickname"
            :border="false"
            fontSize="28rpx"
            maxlength="20"
          />
        </u-form-item>
        <u-form-item label="手机号" borderBottom>
          <u-input
            placeholder="请填写您的手机号"
            v-model="form.phone"
            :border="false"
            fontSize="28rpx"
            type="number"
            maxlength="11"
          ></u-input>
        </u-form-item>
        <u-button
          text="保存"
          shape="circle"
          @click="editCustomerInformation"
          :customStyle="{
            width: '670rpx',
            height: '80rpx',
            fontSize: '24rpx',
            marginTop: '48rpx',
          }"
        ></u-button>
        <!--        <u-form-item label="退出登录" @click="loginOut">-->
        <!--          <u-icon-->
        <!--            slot="right"-->
        <!--            name="arrow-right"-->
        <!--            size="24rpx"-->
        <!--            color="#999"-->
        <!--          ></u-icon>-->
        <!--        </u-form-item>-->
      </view>
    </u-form>
    <view class="py-6 px-20 page-foot">
      <u-button
        text="退出登录"
        type="primary"
        shape="circle"
        @click="loginOut"
        :customStyle="{
          width: '670rpx',
          height: '80rpx',
          fontSize: '24rpx',
          marginTop: '24rpx',
        }"
      ></u-button>
    </view>
  </view>
</template>

<script>
import { fetchSettingProfile } from "@/services/api/crm";
import { mapGetters, mapMutations } from "vuex";
import { uploadFile } from "@/services/api/upload";
export default {
  data() {
    return {
      content: "手打",
      writeOffShow: false,
      form: {
        avatar: "",
        username: "",
        sex: 0,
        description: "",
        merchantName: "",
        type: "",
        contactAddress: "",
        nickname: "",
        phone: "",
        post: "",
        email: "",
      },
      labelStyle: {
        fontSize: "28rpx",
        color: "#666",
      },
      inputStyle: {
        fontSize: "28rpx",
        color: "#333",
      },
    };
  },
  methods: {
    ...mapMutations("user", {
      setCustomerInfo: "setCustomerInfo",
    }),
    async editCustomerInformation() {
      console.log(this.form);
      const { data, error } = await fetchSettingProfile(this.form);
      if (!error) {
        this.$u.toast("保存成功");
        this.setCustomerInfo(this.form);
        this.$Router.back();
      }
    },
    async onChooseAvatar(e) {
      console.log("选择头像", e);
      const { code, data, message } = await uploadFile({
        name: "file",
        filePath: e.target.avatarUrl,
        header: {
          "Content-Type": "multipart/form-data",
        },
      });
      if (code == 0) {
        console.log(data);
      }

      // #ifdef MP-WEIXIN
      // uploadOss({ url: e.target.avatarUrl, type: "image" }).then((res) => {
      //   console.log("上传头像成功", res.ossPath);
      //   this.form.avatar = res.ossPath;
      // });
      //#endif
    },
    loginOut() {
      this.$store.dispatch("user/loginOut");
      this.$Router.back();
    },
  },
  computed: {
    ...mapGetters("user", {
      customerInfo: "getCustomerInfo",
    }),
  },
  onLoad() {
    const { username, nickname } = this.customerInfo;
    Object.assign(this.form, {
      ...this.customerInfo,
      nickname: nickname || username,
    });
  },
};
</script>
<style lang="scss" scoped>
.wrapper-greys {
  .avatar {
    margin: 0 auto;
    overflow: visible;

    .upload {
      right: -6rpx;
      bottom: 0;
      width: 50rpx;
      height: 50rpx;
      border-radius: 50%;
      background: -webkit-linear-gradient(136deg, #86bf9e, #86bfb2);
    }
  }

  .textarea {
    width: 654rpx;
    height: 200rpx;
  }

  ::v-deep .placeholder-class {
    color: #c0c4cc;
  }

  ::v-deep .u-textarea {
    padding: 30rpx 0;

    .u-textarea__field {
      font-size: 28rpx;
    }
  }
  .page-foot {
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    bottom: 0;
    left: 0;
    padding-bottom: 34px;
  }
}
</style>
